<template>
  <el-card style="width: 50%;height: 98%;">
    <!-- 头像 -->
    <div>
      <div style="text-align: center">
        <el-tooltip effect="dark" content="点击上传头像" placement="left">
          <el-avatar :src='avatar' @click.native="showDialog = !showDialog"
            style="height: 110px;width: 110px;cursor: pointer;">
          </el-avatar>
        </el-tooltip>
        <myUpload field="file" :headers="headers" v-model="showDialog" url="http://localhost:9090/file/upload"
          @crop-upload-success="cropUploadSuccess" />
      </div>
    </div>

    <el-form label-width="80px" size="big" style="margin-top: 20px;">
      <el-form-item label="用户名">
        <el-input v-model="user.userName" disabled autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="user.nickName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" autocomplete="off" type="password"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="genderForm" placeholder="请选择" style="width: 500px;">
          <el-option v-for="item in ['男','女']" :key="item" :label="item" :value="item"><i slot="prefix"
              class="el-icon-man"></i>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="user.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="省份">
        <el-input v-model="user.province" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-input v-model="user.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateUser">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import {
    serverIp
  } from "../../public/config";
  import myUpload from 'vue-image-crop-upload/upload-2.vue'

  export default {
    name: "Person",
    data() {
      return {
        genderForm: '',
        serverIp: serverIp,
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        showDialog: false,
        // 头信息保存token
        headers: {
          'Authorization': JSON.parse(localStorage.getItem('token')),
        },
      }
    },
    //注册组件
    components: {
      myUpload
    },
    computed: {
      avatar() {
        return this.user.avatarURL;
      }
    },
    mounted() {
      if (this.user !== null) {
        const that = this;
        this.$axios.get('/user/user', {
            params: {
              id: that.user.id
            }
          }).then(function (response) {
            that.user = response.data;
            if (that.user.gender === '1') {
              that.genderForm = '男';
            } else if (that.user.gender === '2') {
              that.genderForm = '女';
            } else {
              that.genderForm = '';
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }


    },

    watch: {
      genderForm(newName, oldName) {
        if (newName === '男') {
          this.user.gender = 1;
        } else if (newName === '女') {
          this.user.gender = 2;
        } else {
          this.user.gender = 0;
        }
      }
    },

    methods: {
      updateUser() {
        const that = this;
        that.loading = true;
        this.$axios.post('/user/update', {
            city: that.user.city,
            email: that.user.email,
            gender: that.user.gender,
            nickName: that.user.nickName,
            password: that.user.password,
            phone: that.user.phone,
            province: that.user.province,
            phone: that.user.phone,
            id: that.user.id,
          })
          .then(function (response) {
            //重新加载数据a
            that.$message({
              message: '保存成功',
              type: 'success',
              duration: 1600
            });
            //更新数据
            that.$router.push("/home");
            // localStorage.setItem("user", JSON.stringify(that.user));
            // 触发父级跟新user方法
            that.$emit('refreshUser');
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },
      // 上传成功后重新载入信息
      cropUploadSuccess(jsonData) {
        this.user.avatarURL = jsonData.data;
        if (jsonData.code === '200') {
          this.user.avatarURL = jsonData.data;
          this.$message.success('上传成功');
        } else {
          this.$message.error('上传失败');

        }
      }
    }
  }

</script>

<style>
</style>
